<template>
  <div class="orderClassificationPop">
    <van-overlay
      :show="myShow"
      @click="clickOverlay"
      duration="0.2"
    >
      <div class="wrapper">
        <div
          class="box"
          @click.stop="insideClick"
        >
          <van-cell
            @click="clickProcess"
            title="Processing"
          />
          <van-cell
            @click="clickSent"
            title="Sent"
          />
          <van-cell
            @click="clickCancelled"
            title="Cancelled"
          />
        </div>
      </div>
    </van-overlay>
  </div>
</template>
<script>
export default {
  name: 'orderClassificationPop',
  props: {
    show: {
      // 通过props传递给子组件的show，不能在子组件内部修改props中的show值。
      type: Boolean,
      default: false
    }
  },
  methods: {
    clickOverlay() {
      // console.log('outside')
      this.$emit('closePop')
    },
    insideClick() {
      // console.log('inside')
    },
    clickProcess() {
      // alert('Process')
      this.$emit('getStatePop', '2,3')
      this.$emit('closePop')
    },
    clickSent() {
      // alert('Sent')
      this.$emit('getStatePop', '4')
      this.$emit('closePop')
    },
    clickCancelled() {
      // alert('cancell')
      this.$emit('getStatePop', '5')
      this.$emit('closePop')
    },
    logout() {
      alert('退出登陆')
    }
  },
  watch: {
    show: {
      handler(newValue, oldValue) {
        // console.log(newValue)
        if (newValue) {
          this.myShow = true
        } else {
          this.myShow = false
        }
      },
      deep: true
    }
  },
  data() {
    return {
      myShow: false,
      icon_code: require('../../assets/image/icon_code.png'),
      icon_logout: require('../../assets/image/icon_logout.png')
    }
  }
}
</script>
<style lang="scss" scoped>
.orderClassificationPop {
  .van-overlay {
    z-index: 600;
  }
}
.wrapper {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;

  height: 100%;

  .box {
    background-color: #ffffff;

    position: absolute;
    top: 60px;
    right: 8px;
    border-radius: 8px;
    .van-cell {
      border-radius: 8px;
      /deep/ .van-cell__title {
        font-weight: 700;
      }
    }
  }
  .box::before {
    //   https://www.cnblogs.com/JennyLin77/p/5287811.html
    position: absolute;
    color: #ee0a24;
    // font-size: 18px;
    z-index: 200;
    content: '';
    width: 0px;
    height: 0px;
    top: -18px;
    right: 6px;
    border-width: 12px;
    border-style: solid;
    border-color: transparent transparent #ffffff transparent;
  }
}
</style>
